import { useState } from 'react'
export function loadable(obj) {
  let { loader, loading: Loading } = obj
  let Comp;
  return function (props) {
    let [flag, setFlag] = useState(false)
    if (!flag) {
      loader().then(data => {
        //data/default 对应就是获取到的组件
        console.log(data)
        Comp = data.default
        setFlag(true)
      })
    }

    return <>
      {
        flag ? <Comp {...props} /> : <Loading />
      }
    </>
  }
}

export function filterByPermission(arr, role) {
  // 这个方法是根据角色 从 列表晒传出来能展示导航
  let temp = [];
  arr.forEach(item => {
    if (item.role && !item.role.includes(role)) {
      // 证明这个路径访问是需要全现但是 你还没有这个权限
    } else {
      // 若当前这个路由有自己的子路由 那么 子路由也要进行筛选
      if (item.children) {
        item.children = filterByPermission(item.children, role)
      }
      temp.push(item)
    }
  });
  return temp
}